<div class="comp-toggle-google">
    <modal :show="true" :width="760">
        <div class="modal-header">
            <a href="javascript:;" class="close" @click="hide()"><span>&times;</span></a>
            <span class="modal-title" >{{ $t('basic.securitySetting.bindGoogleCode') }}</span>
        </div>
        <validator :rules="rules" :parent="_self">
            <div class="modal-cont fn-flex-xcenter">
                <img src="./img/phone.jpg" alt="" width="240" height="488">
                <form class="m-form-dialog" name="form" autocomplete="off" action="javascript:;" style="width: 320px">
                    <div class="modal-body">
                        <div class="col-row">
                            <div class="col-label">1.{{ $t('basic.securitySetting.downAndInstall') }}</div>
                            <div class="col-imgcont fn-flex-center">
                                <a href="">
                                    <img src="./img/appstore.jpg" alt="">
                                </a>
                                <a href="">
                                    <img src="./img/googleplay.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="col-row">
                            <div class="col-label">2.{{ $t('basic.securitySetting.scanQrcode') }}</div>
                            <div class="col-qrcode fn-flex-center">
                                <div class="col-qrcode-img">
                                    <qrcode :val="googleAuthenticator" :size="150"></qrcode>
                                </div>
                                <div class="col-qrcode-key">
                                    <div class="col-label"  style="padding-left: 8px; margin-bottom: 8px;">
                                        <label for="secretcode">{{ $t('basic.securitySetting.key') }}：</label>
                                    </div>
                                    <div class="col-input">
                                        <input type="text"
                                               class="fn-block"
                                               id="secretcode"
                                               name="secretcode"
                                               v-model="secretcode"
                                               disabled/>
                                        <div class="ui-tip"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-row">
                            <div class="col-label">
                                <label for="loginPwd">3.{{ $t('common.loginPassword') }}</label>
                            </div>
                            <div class="col-input">
                                <input type="password"
                                       class="fn-block"
                                       autocomplete="off"
                                       disableautocomplete
                                       id="loginPwd"
                                       name="loginPwd"
                                       :placeholder="$t('common.loginPassword')"
                                       v-model="form.loginPwd"
                                       @focus="checkLogPsd"
                                       @blur="checkLogPsdBlur">
                                <div class="ui-tip"></div>
                            </div>
                        </div>
                        <div class="col-row">
                            <div class="col-label">
                                <label for="googleCode">4.{{ $t('basic.securitySetting.googleCode') }}</label>
                            </div>
                            <div class="col-input">
                                <input type="text"
                                       class="fn-block"
                                       autocomplete="off"
                                       disableautocomplete
                                       maxlength="6"
                                       id="googleCode"
                                       name="googleCode"
                                       :placeholder="$t('basic.securitySetting.googleCode')"
                                       v-model="form.googleCode">
                                <div class="ui-tip"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="col-row">
                            <div class="col-text">
                                <div class="btn-group">
                                    <button type="submit"
                                            class="ui-btn binds"
                                            v-if="isRequesting === false"
                                            @click="submit()">{{ $t('common.confirm') }}</button>
                                    <button type="submit"
                                            class="ui-btn binds"
                                            v-if="isRequesting === true"
                                            disabled="disabled">{{ $t('common.waiting') }}...</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </validator>
    </modal>
</div>